<#--引入layout文件-->
<#include "/ma/_layout.ftl">

<@head_meta/>
<#--定义该界面需要引入的样式-->
<@head_css>

<!-- BEGIN PAGE LEVEL STYLES -->
<link rel="stylesheet" type="text/css" href="${base}/resources/ma/css/bootstrap-fileupload.css" />

<link rel="stylesheet" type="text/css" href="${base}/resources/ma/css/jquery.gritter.css" />

<link rel="stylesheet" type="text/css" href="${base}/resources/ma/css/chosen.css" />

<link rel="stylesheet" type="text/css" href="${base}/resources/ma/css/select2_metro.css" />

<link rel="stylesheet" type="text/css" href="${base}/resources/ma/css/jquery.tagsinput.css" />

<link rel="stylesheet" type="text/css" href="${base}/resources/ma/css/clockface.css" />

<link rel="stylesheet" type="text/css" href="${base}/resources/ma/css/bootstrap-wysihtml5.css" />

<link rel="stylesheet" type="text/css" href="${base}/resources/ma/css/datepicker.css" />

<link rel="stylesheet" type="text/css" href="${base}/resources/ma/css/timepicker.css" />

<link rel="stylesheet" type="text/css" href="${base}/resources/ma/css/colorpicker.css" />

<link rel="stylesheet" type="text/css" href="${base}/resources/ma/css/bootstrap-toggle-buttons.css" />

<link rel="stylesheet" type="text/css" href="${base}/resources/ma/css/daterangepicker.css" />

<link rel="stylesheet" type="text/css" href="${base}/resources/ma/css/datetimepicker.css" />

<link rel="stylesheet" type="text/css" href="${base}/resources/ma/css/multi-select-metro.css" />

<link href="${base}/resources/ma/css/bootstrap-modal.css" rel="stylesheet" type="text/css"/>
<!-- END PAGE LEVEL STYLES -->
</@head_css>
<@head_script/>

<#--定义该界面需要引入的script-->
<#macro bodyscript>

<!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) -->
<!-- BEGIN CORE PLUGINS -->
<script src="${base}/resources/ma/js/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<!-- IMPORTANT! Load jquery-ui-1.10.1.custom.min.js before bootstrap.min.js to fix bootstrap tooltip conflict with jquery ui tooltip -->
<script src="${base}/resources/ma/js/jquery-ui-1.10.1.custom.min.js" type="text/javascript"></script>
<!--[if lt IE 9]>
<script src="${base}/resources/ma/js/excanvas.min.js"></script>
<script src="${base}/resources/ma/js/respond.min.js"></script>
<![endif]-->
<script src="${base}/resources/ma/js/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="${base}/resources/ma/js/jquery.blockui.min.js" type="text/javascript"></script>
<script src="${base}/resources/ma/js/jquery.cookie.min.js" type="text/javascript"></script>
<script src="${base}/resources/ma/js/jquery.uniform.min.js" type="text/javascript" ></script>
<!-- END CORE PLUGINS -->

<!-- BEGIN PAGE LEVEL PLUGINS -->

<script type="text/javascript" src="${base}/resources/ma/js/ckeditor.js"></script>

<script type="text/javascript" src="${base}/resources/ma/js/bootstrap-fileupload.js"></script>

<script type="text/javascript" src="${base}/resources/ma/js/chosen.jquery.min.js"></script>

<script type="text/javascript" src="${base}/resources/ma/js/select2.min.js"></script>

<script type="text/javascript" src="${base}/resources/ma/js/wysihtml5-0.3.0.js"></script>

<script type="text/javascript" src="${base}/resources/ma/js/bootstrap-wysihtml5.js"></script>

<script type="text/javascript" src="${base}/resources/ma/js/jquery.tagsinput.min.js"></script>

<script type="text/javascript" src="${base}/resources/ma/js/jquery.toggle.buttons.js"></script>

<script type="text/javascript" src="${base}/resources/ma/js/bootstrap-datepicker.js"></script>

<script type="text/javascript" src="${base}/resources/ma/js/bootstrap-datetimepicker.js"></script>

<script type="text/javascript" src="${base}/resources/ma/js/clockface.js"></script>

<script type="text/javascript" src="${base}/resources/ma/js/date.js"></script>

<script type="text/javascript" src="${base}/resources/ma/js/daterangepicker.js"></script>

<script type="text/javascript" src="${base}/resources/ma/js/bootstrap-colorpicker.js"></script>

<script type="text/javascript" src="${base}/resources/ma/js/bootstrap-timepicker.js"></script>

<script type="text/javascript" src="${base}/resources/ma/js/jquery.inputmask.bundle.min.js"></script>

<script type="text/javascript" src="${base}/resources/ma/js/jquery.input-ip-address-control-1.0.min.js"></script>

<script type="text/javascript" src="${base}/resources/ma/js/jquery.multi-select.js"></script>

<script src="${base}/resources/ma/js/bootstrap-modal.js" type="text/javascript" ></script>

<script src="${base}/resources/ma/js/bootstrap-modalmanager.js" type="text/javascript" ></script>

<script src="${base}/resources/ma/js/form-components.js"></script>
<!-- END PAGE LEVEL PLUGINS -->

</#macro>
<#--定义jQuery(document).ready();方法需要初始化的函数-->
<#macro script_ready>
FormComponents.init()
</#macro>

<@layout active_id="device" child_active_id="hardware">

<#--一定要包含于layout内-->
    <@pageheader page_title="设备管理" page_title_small="添加设备Demo" nav1_title="" nav1_url="" nav2_title="设备管理" nav2_url="" nav3_title="添加设备" nav3_url=""/>
<!-- BEGIN PAGE CONTENT-->

<div class="row-fluid">

    <div class="span12">

        <!-- BEGIN SAMPLE FORM PORTLET-->

        <div class="portlet box blue">

            <div class="portlet-title">

                <div class="caption"><i class="icon-reorder"></i>添加设备</div>

                <div class="tools">

                    <a href="javascript:;" class="collapse"></a>

                    <a href="#portlet-config" data-toggle="modal" class="config"></a>

                    <a href="javascript:;" class="reload"></a>

                    <a href="javascript:;" class="remove"></a>

                </div>

            </div>

            <div class="portlet-body form">

                <!-- BEGIN FORM-->

                <form action="${base}/admin/device" class="form-horizontal" method="post">
                    <div class="control-group">

                        <label class="control-label">设备ID</label>

                        <div class="controls">

                            <input type="text" class="span6 m-wrap" name="id" value="${device.id}" id="id" placeholder="设备ID"/>

                            <!--<span class="help-inline">Some hint here</span>-->

                        </div>

                    </div>

                    <div class="control-group">

                        <label class="control-label">设备名称</label>

                        <div class="controls">

                            <input type="text" class="span6 m-wrap" name="name" value="${device.name}" id="name" placeholder="设备名称"/>

                            <!--<span class="help-inline">Some hint here</span>-->

                        </div>

                    </div>
                    <div class="control-group">

                        <label class="control-label">设备标识</label>

                        <div class="controls">

                            <input type="text" class="span6 m-wrap" name="sysId" value="${device.sysId}" id="sysId" placeholder="设备标识"/>

                            <!--<span class="help-inline">Some hint here</span>-->

                        </div>

                    </div>
                    <div class="control-group">

                        <label class="control-label">设备加密</label>

                        <div class="controls">

                            <input type="text" class="span6 m-wrap" name="key" value="${device.key}" id="key" placeholder="设备加密"/>

                            <!--<span class="help-inline">Some hint here</span>-->

                        </div>

                    </div>

                    <div class="control-group">

                        <label class="control-label">periodDate</label>

                        <div class="controls">

                            <input type="text" class="span6 m-wrap" name="periodDate" value="${device.periodDate}" id="periodDate" placeholder="periodDate"/>

                            <!--<span class="help-inline">Some hint here</span>-->

                        </div>

                    </div>


                    <div class="control-group">

                        <label class="control-label">状态</label>

                        <div class="controls">

                            <label class="radio">

                                <input type="radio" name="status" value="ON" checked/>

                                启用

                            </label>

                            <label class="radio">

                                <input type="radio" name="status" value="OFF"  />

                                禁用

                            </label>

                        </div>

                    </div>

                    <div class="form-actions">

                        <button type="submit" class="btn blue">保存</button>

                        <button type="button" class="btn">返回</button>

                    </div>

                </form>

                <!-- END FORM-->

            </div>

        </div>

        <!-- END SAMPLE FORM PORTLET-->

    </div>

</div>

</@layout>